<template>
  <div class="space-y-6">
    <div class="card">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-medium text-gray-900">漏洞搜索</h2>
      </div>
      
      <div class="flex space-x-4 mb-6">
        <div class="flex-1">
          <div class="relative">
            <input
              type="text"
              v-model="searchQuery"
              placeholder="输入包名、漏洞ID或描述进行搜索..."
              class="input pl-10"
              @keyup.enter="handleSearch"
            />
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
          </div>
        </div>
        <button @click="handleSearch" class="btn">
          搜索
        </button>
      </div>

      <div v-if="loading" class="text-center py-4">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div>
      </div>

      <div v-else-if="searchResults.length > 0" class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                ID
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                包名
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                严重程度
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                发布时间
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                状态
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="vuln in searchResults" :key="vuln.id">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                {{ vuln.id }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ vuln.package }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="severityClass(vuln.severity)" class="px-2 py-1 text-xs font-medium rounded-full">
                  {{ vuln.severity }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ vuln.published }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="statusClass(vuln.fixed)" class="px-2 py-1 text-xs font-medium rounded-full">
                  {{ vuln.fixed ? '已修复' : '未修复' }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div v-else-if="hasSearched" class="text-center py-4 text-gray-500">
        未找到相关漏洞
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { searchVulnerabilities } from '../services/api'

const searchQuery = ref('')
const searchResults = ref([])
const loading = ref(false)
const hasSearched = ref(false)

const severityClass = (severity) => {
  const classes = {
    high: 'bg-red-100 text-red-800',
    medium: 'bg-yellow-100 text-yellow-800',
    low: 'bg-green-100 text-green-800'
  }
  return classes[severity] || 'bg-gray-100 text-gray-800'
}

const statusClass = (fixed) => {
  return fixed
    ? 'bg-green-100 text-green-800'
    : 'bg-red-100 text-red-800'
}

const handleSearch = async () => {
  if (!searchQuery.value.trim()) return
  
  loading.value = true
  hasSearched.value = true
  
  try {
    const response = await searchVulnerabilities(searchQuery.value)
    searchResults.value = response.data.vulnerabilities
  } catch (error) {
    console.error('搜索失败:', error)
  } finally {
    loading.value = false
  }
}
</script> 